<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta
        http-equiv="Content-Type"
        content="text/html; charset=utf-8"
    />
    <title>1创建父网格</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <!-- 允许您将模型导入到场景中 -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- 允许您使用触摸屏 -->
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>

<body>
    <canvas
        id="renderCanvas"
        touch-action="none"
    ></canvas>
    <!-- 注意browseatouch-action="none"以获得PEPr/canvas调整大小事件的最佳效果 -->


    <script>
        const canvas = document.getElementById("renderCanvas"); //获取canvas元素
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        //在这里添加与playground格式匹配的代码
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);//使用引擎
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));//设置摄像机
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));//设置灯光

            const faceColors = [];
            faceColors[0] = BABYLON.Color3.Blue();
            faceColors[1] = BABYLON.Color3.Teal()
            faceColors[2] = BABYLON.Color3.Red();
            faceColors[3] = BABYLON.Color3.Purple();
            faceColors[4] = BABYLON.Color3.Green();
            faceColors[5] = BABYLON.Color3.Yellow();

            const boxParent = BABYLON.MeshBuilder.CreateBox("Box", { faceColors: faceColors });
            const boxChild = BABYLON.MeshBuilder.CreateBox("Box", { size: 0.5, faceColors: faceColors });
            //设置父网格
            boxChild.setParent(boxParent);

            boxChild.position.x = 0;
            boxChild.position.y = 2;
            boxChild.position.z = 0;

            boxChild.rotation.x = Math.PI / 4;
            boxChild.rotation.y = Math.PI / 4;
            boxChild.rotation.z = Math.PI / 4;

            boxParent.position.x = 2;
            boxParent.position.y = 1.5;
            boxParent.position.z = 0;

            boxParent.rotation.x = 0;
            boxParent.rotation.y = -Math.PI / 3;
            boxParent.rotation.z = -Math.PI / 6;

            const boxChildAxes = localAxes(1, scene);
            boxChildAxes.parent = boxChild;
            showAxis(6, scene);

            return scene;

        }

        /***********创建并且画出轴**************************************/
        const showAxis = (size, scene) => {
            const makeTextPlane = (text, color, size) => {
                const dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
                dynamicTexture.hasAlpha = true;
                dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color, "transparent", true);
                const plane = new BABYLON.MeshBuilder.CreatePlane("TextPlane", { size, updateable: true }, scene);
                plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
                plane.material.backFaceCulling = false;
                plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
                plane.material.diffuseTexture = dynamicTexture;
                return plane;
            };

            const axisX = BABYLON.MeshBuilder.CreateLines("axisX", {
                points: [
                    new BABYLON.Vector3.Zero(), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0),
                    new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
                ]
            });
            axisX.color = new BABYLON.Color3(1, 0, 0);
            const xChar = makeTextPlane("X", "red", size / 10);
            xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);

            const axisY = BABYLON.MeshBuilder.CreateLines("axisY", {
                points: [
                    new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(-0.05 * size, size * 0.95, 0),
                    new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(0.05 * size, size * 0.95, 0)
                ]
            });
            axisY.color = new BABYLON.Color3(0, 1, 0);
            const yChar = makeTextPlane("Y", "green", size / 10);
            yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);

            const axisZ = BABYLON.MeshBuilder.CreateLines("axisZ", {
                points: [
                    new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, -0.05 * size, size * 0.95),
                    new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, 0.05 * size, size * 0.95)
                ]
            });
            axisZ.color = new BABYLON.Color3(0, 0, 1);
            const zChar = makeTextPlane("Z", "blue", size / 10);
            zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
        };

        /*********************************************************************/

        /*******************************Local Axes****************************/
        localAxes = (size, scene) => {
            const local_axisX = BABYLON.MeshBuilder.CreateLines("local_axisX", {
                points: [
                    new BABYLON.Vector3.Zero(), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0),
                    new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
                ]
            }, scene);
            local_axisX.color = new BABYLON.Color3(1, 0, 0);

            local_axisY = BABYLON.MeshBuilder.CreateLines("local_axisY", {
                points: [
                    new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(-0.05 * size, size * 0.95, 0),
                    new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(0.05 * size, size * 0.95, 0)
                ]
            }, scene);
            local_axisY.color = new BABYLON.Color3(0, 1, 0);

            const local_axisZ = BABYLON.MeshBuilder.CreateLines("local_axisZ", {
                points: [
                    new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, -0.05 * size, size * 0.95),
                    new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, 0.05 * size, size * 0.95)
                ]
            }, scene);
            local_axisZ.color = new BABYLON.Color3(0, 0, 1);

            const local_origin = new BABYLON.TransformNode("local_origin");

            local_axisX.parent = local_origin;
            local_axisY.parent = local_origin;
            local_axisZ.parent = local_origin;

            return local_origin;
        }
        /*******************************End Local Axes****************************/

        const scene = createScene(); //调用createScene函数

        //注册一个渲染循环来重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });

        // 注意浏览器、画布大小调整事件
        window.addEventListener("resize", function () {
            engine.resize();
        });

    </script>
</body>

</html>